<template>
	<view>
		<!--动态卡片-->
		<block v-if="type == 'dynamic'">
			<view class="my-card-list cu-card dynamic no-card ">
				<view class="cu-item shadow" v-for="item in list.datas" :key="item.id">
					<view class="cu-list menu-avatar" @click="goTo" :data-path="toUrl(item.id)">
						<view class="cu-item">
							<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view> -->
							<view class="cu-avatar round lg bg-gradual-blue">
								<text class="avatar-text">
									{{ (item.user && item.user.name) || (item.teacher && item.teacher.name) || (item.student && item.student.name) || appName }}
								</text>
							</view>
							<!-- <image :src="imgServer + item.pic" class="radius" mode="aspectFill"></image> -->
							<view class="content flex-sub">
								<view>{{ item.name }}</view>
								<view class="text-gray text-sm flex justify-between">{{ $util.dateFormat(item.added_time) }}</view>
							</view>
						</view>
					</view>
					<view class="text-content" @click="goTo" :data-path="toUrl(item.id)"><rich-text :nodes="item.intro || item.detail"></rich-text></view>
					<!-- <view class="grid flex-sub padding-lr" v-if="item.pic!=null" :class="item.pic && item.pic.split(';').length > 1 ? 'col-3 grid-square' : 'col-1'">
						<view
							class="bg-img"
							:class="item.pic && item.pic.split(';').length > 1 ? '' : 'only-img'"
							:style="'background-image:url(' + imgServer + img + ');'"
							v-for="(img, index) in item.pic.split(';').length > 1 ? item.pic.split(';') : [item.pic]"
							:key="index"
						></view> 
					</view> -->
					<view class="text-gray text-sm text-right padding">
						<text class="cuIcon-attentionfill margin-lr-xs"></text>
						0
						<text class="cuIcon-appreciatefill margin-lr-xs"></text>
						0
						<text class="cuIcon-messagefill margin-lr-xs"></text>
						0
					</view>
				</view>
			</view>
		</block>
		<!-- <view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text>
				消息列表
			</view>
		</view> -->
		<!-- <uni-collapse :accordion="true" v-if="type == 'collapse'"> 
	    	<uni-collapse-item v-for="(item, index) in list.datas" :key="index" :title="item.name" :show-animation="true"  >
	    		<text class="content">{{item.intro }}</text>
	    	</uni-collapse-item>
	    </uni-collapse> -->
		<!--消息列表 -->
		<view class="my-card-list cu-list menu-avatar" v-if="type == 'message'">
			<!-- <view class="cu-item">
				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
				<view class="content">
					<view class="text-grey">凯尔</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="cuIcon-infofill text-red  margin-right-xs"></text>
							我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
						</view>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">22:20</view>
					<view class="cu-tag round bg-grey sm">5</view>
				</view>
			</view> -->
			<!-- <view class="cu-item">
				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
					<view class="cu-tag badge">99+</view>
				</view>
				<view class="content">
					<view class="text-grey">
						<view class="text-cut">瓦洛兰之盾-塔里克</view>
						<view class="cu-tag round bg-orange sm">战士</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
						</view>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">22:20</view>
					<view class="cuIcon-notice_forbid_fill text-gray"></view>
				</view>
			</view> -->
			<view class="cu-item " v-for="(item, index) in list.datas" :key="index" @click="goTo" :data-path="toUrl(item.id)">
				<view class="cu-avatar radius lg" :style="'background-image:url(' + imgServer + item.pic + ');'"></view>
				<view class="content">
					<view class="text-pink">
						<view class="text-cut">{{ item.name }}</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">{{ item.intro }}</view>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{ $util.dateFormat(item.added_time) }}</view>
					<!-- <view class="cu-tag round bg-red sm"></view> -->
				</view>
			</view>
			<!-- <view class="cu-item grayscale">
				<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
				<view class="content">
					<view>
						<view class="text-cut">伊泽瑞尔</view>
						<view class="cu-tag round bg-orange sm">断开连接...</view>
					</view>
					<view class="text-gray text-sm flex"><view class="text-cut">等我回来一个打十个</view></view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">22:20</view>
					<view class="cu-tag round bg-red sm">5</view>
				</view>
			</view> -->
			<!-- <view class="cu-item cur">
				<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
					<view class="cu-tag badge"></view>
				</view>
				<view class="content">
					<view>
						<view class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</view>
						<view class="cu-tag round bg-orange sm">6人</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							伊泽瑞尔：
							<text class="cuIcon-locationfill text-orange margin-right-xs"></text>
							传送中...
						</view>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">22:20</view>
					<view class="cuIcon-notice_forbid_fill text-gray"></view>
				</view>
			</view> -->
		</view>
		<!--时间轴列表 使用于二级菜单 比如课程章节的子章节-->
		<view class="my-card-list cu-timeline padding-top-sm padding-bottom-sm" v-if="type == 'timeline'">
			<view class="cu-item text-green" :class="{ 'padding-bottom-0': item.childs.length > 0 }" v-for="(item, index) in list.datas" :key="index">
				<view class="content bg-white">
					<view class="cu-capsule radius" @click="goTo" :data-path="toUrl(item.id)">
						<text class="text-gree text-df text-bold">{{ item.name }}</text>
						<!-- <view class="cu-tag line-cyan">版本</view> -->
					</view>
					<view class="margin-top-sm text-content" v-if="item.childs.length > 0">
						<view class="cu-list menu">
							<view class="cu-item" :class="true ? 'arrow' : ''" v-for="(item2, index) in item.childs" :key="index" @click="goTo" :data-path="toUrl(item2.id)">
								<view class="content">
									<text class="cuIcon-read text-gree text-xs"></text>
									<text class="text-gree">{{ item2.name }}</text>
								</view>
								<view class="action"><!-- <view class="cu-tag round bg-blue light">旅行</view> --></view>
							</view>
						</view>
						<!-- <view v-for="(item, index) in item.childs" :key="index" >{{ item.name }}</view> -->
					</view>
				</view>
			</view>
		</view>
		<block v-if="type == 'timeline2'">
			<view class="cu-timeline padding-left-sm padding-top-sm" v-for="(item, index) in groups" :key="index">
				<view class="cu-time" style="font-size: 23rpx;">{{ $util.dateFormat(item.added_time) }}</view>
				<view class="cu-item cur " v-for="(o, i) in item.items" :key="i">
					<view class="content shadow-blur" :class="i % 2 == 0 ? 'bg-cyan' : index % 3 == 0 ? 'bg-green' : 'bg-grey'">
						<text>{{ $util.dateFormat(o.added_time, 'h:m') }}{{ o.status }}</text>
						【{{ o.clock.type }}】{{ o.clock.course.name }}
					</view>
				</view>
			</view>
		</block>
		<!--商品类卡片-->
		<view class="my-card-list cu-card goods no-card " v-if="type == 'goods'">
			<my-card-header v-show="showHeader"></my-card-header>
			<view class="card-section">
				<view v-for="(item, index) in list.datas" :key="index" class="card-item" @click="goTo" :data-path="'/pages/goods/detail?id=' + item.id">
					<view class="image-wrapper"><image :src="imgServer + item.main_photo" mode="aspectFill"></image></view>
					<text class="title text-cut">{{ item.name }}</text>
					<text class="text-price text-red">{{ item.price }}</text>
				</view>
			</view>
		</view>
		<!--文章列表卡片-->
		<view class="my-card-list cu-card article" :class="true ? 'no-card' : ''" v-if="type == 'article'">
			<my-card-header v-if="showHeader" :icon="headerIcon" :title="headerTitle" :title2="headerTitle2" :url="headerUrl"></my-card-header>
			<view class="cu-item shadow" v-for="(item, index) in list.datas" :key="index" @click="goTo" :data-path="toUrl(item.id)">
				<view class="img" v-if="item.pic"><image :src="imgServer + item.pic" class="radius" mode="aspectFill"></image></view>
				<view class="desc">
					<view class="text-gree text-title">
						<view class="text-cut">{{ item.name }}</view>
					</view>
					<view class="text-content text-cut"><rich-text :nodes="item.intro || item.detail"></rich-text></view>
					<view class="text-tag">
						<view class="cu-tag bg-olive light sm round">
							{{ (item.user && item.user.name) || (item.teacher && item.teacher.name) || (item.student && item.student.name) || appName }}
						</view>
						<view class="cu-tag bg-orange light sm round">{{ $util.dateFormat(item.added_time) }}</view>
						<!-- <view class="cu-tag bg-cyan light sm round" >{{ item.visitNum||10 }}人学习</view> -->
						<view class="cu-tag bg-cyan light sm round">{{ (item.category && item.category.name) || '' }}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="list.status" :content-text="list.statusText" color="#ccc"></uni-load-more>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import myCardHeader from '@/components/my-card-header/my-card-header.vue';
import baseMixin from '@/mixin/base.js';
import { mapState, mapMutations } from 'vuex';
/* import uniCollapse from '@/components/uni-collapse/uni-collapse.vue' 
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue' */
export default {
	components: {
		uniLoadMore,
		myCardHeader
	},
	mixins: [baseMixin],
	data() {
		return {
			isCard: false
		};
	},
	computed: {
		...mapState('base', ['logo', 'appName']),
		list() {
			//console.error( this.listData.list)
			var data, status;
			if (Array.isArray(this.listData)) {
				data = this.listData;
				status = 'noMore';
			} else {
				data = this.listData.list;
				status = this.listData.loadStatus;
			}
			return {
				datas: data,
				status: status, //more、loading、noMore
				statusText: {
					contentdown: '上拉查看更多',
					contentrefresh: '努力加载中',
					contentnomore: '————————  我也是有底线的  ————————'
				}
			};
		},
		groups() {
			//https://www.cnblogs.com/fozero/p/11254572.html
			let newArr = [];
			var that = this;
			this.listData.list &&
				this.listData.list.forEach((item, i) => {
					let index = -1;
					let isExists = newArr.some((newItem, j) => {
						if (that.$util.dateFormat(item.added_time) == that.$util.dateFormat(newItem.added_time)) {
							index = j;
							return true;
						}
					});
					if (!isExists) {
						newArr.push({
							added_time: that.$util.dateFormat(item.added_time),
							timeDay: item.timeDay,
							timeMonth: item.timeMonth,
							items: [item]
						});
					} else {
						newArr[index].items.push(item);
					}
				});
			//console.error(newArr )
			return newArr;
		}
	},
	methods: {
		toUrl(id) {
			if (this.url.lastIndexOf('?') < 0) {
				return this.url + '?id=' + id;
			} else {
				return this.url + '&id=' + id;
			}
		}
	},
	props: {
		type: {
			type: String,
			default: 'goods' //dynamic  goods article
		},
		url: {
			type: String,
			default: '' //点击跳转地址
		},
		showHeader: {
			type: Boolean,
			default: true
		},
		headerIcon: {
			type: String,
			default: 'cuIcon-evaluate_fill'
		},
		headerTitle: {
			type: String,
			default: '热门推荐'
		},
		headerTitle2: {
			type: String,
			default: 'hot recommend'
		},
		headerUrl: {
			type: String,
			default: ''
		},
		showImage: {
			type: Boolean,
			default: true
		},
		listData: {
			//数据列表
			type: [Object, Array],
			default() {
				return {
					list: [],
					loadStatus: 'noMore' //加载状态
				}; //{list:[],LoadStatus:""noMore}
			}
		}
	}
};
</script>

<style lang="scss">
.card-header {
	display: flex;
	align-items: center;
	height: 140upx;
	padding: 3upx $uni-spacing-col-lg 8upx;
	background: #fff;
	image {
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		margin-right: 20upx;
	}
	.myIcon {
		font-size: $uni-img-size-lg;
	}
	.tit-box {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.tit {
		font-size: $uni-font-size-lg + 2upx;
		color: $uni-text-color;
		line-height: 1.3;
	}
	.tit2 {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
	}
	.cuIcon-right {
		font-size: $uni-font-size-lg + 2upx;
		color: $uni-text-color-grey;
	}
}
.card-section {
	display: flex;
	flex-wrap: wrap;
	padding: $uni-spacing-col-sm $uni-spacing-col-lg;
	background: #fff;
	.card-item {
		display: flex;
		flex-direction: column;
		width: 48%;
		padding-bottom: 40upx;
		&:nth-child(2n + 1) {
			margin-right: 4%;
		}
	}
	.image-wrapper {
		width: 100%;
		height: 350upx;
		border-radius: 3px;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.title {
		font-size: $uni-font-size-lg;
		color: $uni-text-color;
		line-height: 80upx;
	}
	.price {
		line-height: 1;
	}
}
.my-card-list.cu-card.dynamic > .cu-item > .text-content {
	max-height: 300rpx;
	overflow: hidden;
}
.my-card-list.cu-timeline > .cu-item.padding-bottom-0 {
	padding-bottom: 0;
	margin-bottom: -4rpx;
}
.my-card-list.cu-timeline > .cu-item {
	padding-left: 90rpx;
	> .content {
		padding: 0upx;
		padding-top: 10rpx;
		padding-left: 0;
	}
	.cu-list.menu > .cu-item {
		padding: 0 0rpx;
	}
	.cu-list.menu > .cu-item::after {
		border: 0;
	}
	[class*='cuIcon-'] {
		font-size: 26rpx;
	}
	.cu-list.menu > .cu-item .content > text {
		margin-right: 3rpx;
	}
}
.my-card-list.cu-timeline > .cu-item:last-child {
	padding-bottom: 70rpx;
}
.my-card-list.cu-timeline > .cu-item::before {
	left: 17rpx;
}
.my-card-list.cu-timeline > .cu-item::after {
	left: 42rpx;
	width: 1rpx;
}
.my-card-list.article {
	display: block;
	.cu-item:first-child {
		padding-top: 25rpx;
	}
	.cu-item:last-child {
		padding-bottom: 35rpx;
	}
	> .cu-item {
		display: flex;
		padding: 0 30upx;
		padding-bottom: 30upx;
		> .img {
			flex: 1;

			> image {
				width: 240upx;
				height: 5.2em;
				margin-right: 20upx;
				border-radius: 6upx;
			}
		}
		> .desc {
			flex: 2;
			min-width: 0;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			.text-title {
				font-size: 30rpx;
				line-height: 30rpx;
			}
			.text-content {
				font-size: 26upx;
				color: #888;
				overflow: hidden;
			}
			.text-content,
			.text-tag {
				margin-top: 15rpx;
			}
		}
	}
}
</style>
